<template>
  <div id="qrcode">
     <!-- {{result}} -->
     <van-sticky style="background:#fff">
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div class="title">我的二维码</div>
      </div>
    </van-sticky>
   
    <div class="content">
        <div class="info">
            <div>{{userInfo.name}}</div>
            <div>{{userInfo.phone}}</div>
        </div>
        <div>
            <div class="qr-code" ref="qrCodeUrl">
            </div>
            <div class="tip">
                <div>出示给好友扫描</div>
                <div>添加为亲友或者好友</div>
            </div>
        </div>
        <!-- <div> -->
            <van-button class="btn"  block @click="handleScan"><van-icon style="color:#fff" name="scan" /> 扫一扫</van-button>
        <!-- </div> -->
    </div>
  </div>
</template>

<script>
import store from '../../../store'
import QRCode from 'qrcodejs2';
export default {
    data(){
        return{
             back: require("@/assets/my/back.png"),
             userInfo:{},
            //  store:store
            result:''
        }
    },
    created(){
    //     let str = '{"action":"scanQR","param":{"result":{"name":"1111"}}}'
    //   JSON.parse(str)
    //   console.log(JSON.parse(str),'111111111111111111111111111111111111111111111111')
    },
    mounted(){
       window["getInfoFromFlutter"] = (info) => {
           
            if (JSON.parse(info).action === 'scanQR') {
                 this.result = JSON.parse(info).param.result
                this.getInfoFromFlutter(info);
            }
       };
        this.userInfo = JSON.parse(this.$route.query.userInfo)
        console.log(store.state.imgUrl)
         
        this.creatQrCode()
    },
    methods:{
        getParam(name) {
            if (this.result) {
                    const query = this.result
                    const vars = query.split("&");
                    for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == name) {
                        return pair[1];
                    }
                    }
                } else {
                    return "";
            }

        },
        getInfoFromFlutter(info) {
            // this.$toast(info)
            let data = JSON.parse(info);
            //  this.result = data
            if (data.action == "scanQR" && data.param && data.param.result) {
                // 3、存储到store里
                // this.result = data.param.result;
                const url = this.getParam('url') ? this.getParam('url') : ''
                let data = {
                    name:this.getParam('name') ? this.getParam('name') : '',
                    phone:this.getParam('phone') ? this.getParam('phone') : '',
                    userId:this.getParam('userId') ? this.getParam('userId') : ''
                }
                if (url) {
                     this.$router.push({
                    // checkLoading
                        path: "/" + url,
                        query: data
                    })
                }
               
            }
        },
        handleBack(){
            this.$router.push({path: '/my'})
            let message = {
                action: 'showBottom',
                param: {}
            }
            getInfoFromVue.postMessage(JSON.stringify(message))
        },
        handleScan(){
            // this.$toast('正在建设中')
             let message = {
                action: "scanQR",
                param: {
                  result: "checkLoading", //必填
                },
            };
            getInfoFromVue.postMessage(JSON.stringify(message));
            //     this.$router.push(
            //       {
            //         path: '/addFrendOrRelatives',
            //         query: {}
            //       }
            //   )
        },
        /* 创建二维码 */
        creatQrCode() {
            // const urlPre = 'https://debug.yasee.com.cn:9035/#/' 
            // const urlPre = 'http://localhost:8081/#/'
            // const url = urlPre + 'checkLoading?name=' + this.userInfo.name + '&phone=' + this.userInfo.phone + '&userId=' + this.userInfo.userId
            // console.log(url)
            // const url = `"url": checkLoading,"name":"${this.userInfo.name}","phone":"${this.userInfo.phone}","userId":"${this.userInfo.userId}"`
             const url = `url=checkLoading&name=${this.userInfo.name}&phone=${this.userInfo.phone}&userId=${this.userInfo.userId}`
            new QRCode(this.$refs.qrCodeUrl, {
                text: url, // 二维码的内容
                width: 200,
                height: 200,
                colorDark: '#000',
                colorLight: '#fff',
                correctLevel: QRCode.CorrectLevel.H
            })
        }

    }
}
</script>

<style lang="less" scoped>
#qrcode{
    height: 100vh;
    padding: 0px 15px;
    text-align: center;
    .nav {
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      .title{
      font-size: 20px;
      font-weight: 500;
    }

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
   
    }
    .content{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: calc(100vh - 100px);
       
        .info{
            font-size: 30px;
            font-weight: 500;
            div{
                padding: 5px;
            }
        }
        .btn{
            font-size:20px;
            background:rgba(242, 150, 0, 1);
            color:#fff;
            border-radius:10px;
            width: 90%;
             text-align: center;
        }
        .tip{
            font-size: 17px;
            color: #ccc;
            padding: 20px 0;
        }
    }
    .qr-code{
        // width: 100px;
        // height: 100px;
    }
    
}
</style>